<!--
 * @Author: your name
 * @Date: 2022-03-06 15:33:31
 * @LastEditTime: 2024-01-17 13:59:27
 * @LastEditors: sunli
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /etrip-ui/src/pages/field/demo.vue
-->
<template>
  <div class="wrap">
    <p @click="print">基础用法</p>
    <Cell-group>
      <Field v-model="value_1" title="文本" placeholder="请输入文本"></Field>
    </Cell-group>
    <p>自定义类型</p>
    <Cell-Group inset>
      <template v-if="true">
        <Field v-model="value_2" type="text" title="文本" placeholder="请输入文本"></Field>
      </template>
      <Field v-model="value_2" type="text" title="文本" placeholder="请输入文本"></Field>
      <Field v-model="value_3" type="number" title="手机号" placeholder="请输入手机号"></Field>
      <Field v-model="value_4" type="password" title="密码" placeholder="请输入密码"></Field>
      <template v-if="true">
        <Field v-model="value_2" type="text" title="文本" placeholder="请输入文本"></Field>
      </template>
    </Cell-Group>
    <p>禁用输入框</p>
    <Cell-Group inset>
      <Field v-model="value_5" title="文本" placeholder="禁用输入框" disabled></Field>
      <Field v-model="value_6" title="手机号" placeholder="只读输入框" readonly></Field>
    </Cell-Group>
    <p>插入图标</p>
    <Cell-Group inset>
      <Field v-model="value_5" title="文本" placeholder="禁用输入框" leftIcon="iconfont icon-etrip-select" rightIcon="iconfont icon-etrip-select"></Field>
    </Cell-Group>

    <p>加密框，获取焦点就会清空输入数据</p>
    <Cell-Group inset>
      <Field
        v-model="value_8"
        encrypt
        encrypt_s="3"
        encrypt_e="4"
        title="加密文本"
        placeholder="加密"
      ></Field>
      <Field
        v-model="value_9"
        encrypt
        encrypt_s="3"
        encrypt_e="@"
        title="加密文本"
        placeholder="加密"
      ></Field>
    </Cell-Group>

    <p>文本区</p>
    <Cell-Group inset>
      <Field v-model="value_7" type="textarea" placeholder="请输入文本" title="文本区"></Field>
    </Cell-Group>
  </div>
</template>

<script setup>
import {Field, CellGroup} from '../../../packages/lib/index'
import { ref, watch } from 'vue'

const value_1 = ref()
const value_2 = ref()
const value_3 = ref()
const value_4 = ref()
const value_5 = ref('12')
const value_6 = ref('1212')
const value_7 = ref()
const value_8 = ref('1321250413')
const value_9 = ref('13212504130@163.com')

const print = () => {
  console.log(value_5.value)
  console.log(value_6.value)
}
watch(() => value_8.value, (value) => {
  console.log(value);
})
</script>
<style lang='scss' scoped>
.wrap {
  background-color: #f7f8fa;
}
p {
  margin: 20px 16px;
}
</style>